<template>
    <div>
         <el-breadcrumb separator="/">
            <el-breadcrumb-item >健康管理</el-breadcrumb-item>
            <el-breadcrumb-item :to="{ path: '/index/healthy/tiwen' }">体温管理</el-breadcrumb-item>
        </el-breadcrumb>

        <el-row class="margintop20">
            <el-col>
                <el-button type="success" @click="showDialog">体温检测登录</el-button>
            </el-col>
        
        
        <el-col>
            <el-table
            :data="tiwenlist"
                style="width:100%"
                class="tableinfo margin20"
                :header-cell-style="{'text-align':'center'}"
                :cell-style="{'text-align':'center'}"
               
            >
                <el-table-column label="#" type="index"></el-table-column>
                <el-table-column label="时间" prop="time">
                    <template slot-scope="scope">
                        {{scope.row.time | timeFormat}}
                    </template>
                </el-table-column>
                <el-table-column label="体温(℃)"  prop="tiwen"></el-table-column>
                <el-table-column label="状态">
                    <template slot-scope="scope">
                        <el-tag effect="plain" v-if="scope.row.tiwen > 37.3" type="danger">发烧</el-tag>
                         <el-tag effect="plain" v-else type="success">正常</el-tag>
                    </template>
                </el-table-column>

                <el-table-column label="是否检测" >
                        <template slot-scope="scope">
                            <el-switch  
                                v-if="scope.row.tiwen>37.3"
                                v-model="scope.row.ishei"
                                active-text="是"
                                inactive-text="否"
                                active-color="#67C23A"
                                inactive-color="#F56C6C"
                                active-value="1"
                                inactive-value="0"
                                @change="changeIsHei(scope.row)"
                            >
                                
                            </el-switch>
                        </template>
                    </el-table-column>
                <el-table-column label="核酸结果" >
                        <template slot-scope="scope">
                            <el-switch  
                                v-model="scope.row.is_yin"
                                active-text="阴性"
                                inactive-text="阳性"
                                active-color="#67C23A"
                                inactive-color="#F56C6C"
                                active-value="1"
                                inactive-value="0"
                                @change="changeIsYin(scope.row)"
                            >
                                
                            </el-switch>
                        </template>
                    </el-table-column>
                <el-table-column label="操作">
                    <template slot-scope="scope">
                        <el-button @click="updata(scope.row)" type="primary" icon="el-icon-edit" circle></el-button>
                        <el-popconfirm
                                confirmButtonText='好的'
                                cancelButtonText='不用了'
                                icon="el-icon-info"
                                iconColor="red"
                                title="这是一段内容确定删除吗？"
                                @onConfirm="delTiwen(scope.row)"
                                >
                                <el-button type="danger" slot="reference" icon="el-icon-delete" circle></el-button>
                        </el-popconfirm>
                        
                    </template>
                </el-table-column>
            </el-table>
        </el-col>

        </el-row>
        <el-dialog
            title="修改以用户"
            :visible.sync="dialogVisible"
            width="30%"
            :before-close="handleClose">
            <el-form 
                :model="form" 
                :rules="rules"
                ref="myform" 
                label-width="100px"
                label-position="right" 
                class="myform">
                <el-form-item label="体温" prop="tiwen">
                    <el-input v-model="form.tiwen"></el-input>
                </el-form-item>
               
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="updateById()">确 定</el-button>
            </span>
        </el-dialog>
        
        <el-dialog
            title="修改以用户"
            :visible.sync="updataVisible"
            width="30%"
            :before-close="updataClose">
            <el-form 
                :model="myform" 
                :rules="rules"
                ref="myform" 
                label-width="100px"
                label-position="right" 
                class="myform">
                <el-form-item label="体温" prop="tiwen">
                    <el-input v-model="myform.tiwen"></el-input>
                </el-form-item>
               
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="updataVisible = false">取 消</el-button>
                <el-button type="primary" @click="update()">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
import {addtiwen,mytiwenlist,delOneList,updatetiwenone,updateishei,updateisyin} from "@/api"
import Vue from "vue"
export default {
    data(){
        return {
            dialogVisible:false,
            updataVisible:false,
            form:{},
            myform:{},
            tiwenlist:[],
            rules:{
                tiwen:[
                    {required:true,message:"请输入体温记录",trigger:"blur"},
                    {
                        validator:(rule,value,callback)=>{
                            var reg = /((^3[5-9])(\.\d+)?|^(40)(\.0+)?)$/;
                            if(reg.test(value)){
                                callback()
                            }else{
                                callback(new Error("请输入正确的体温"))
                            }
                        },
                        trigger:"blur"
                    }
                ]
            }
        }
    },
    mounted(){
        this.getlist()
    },
    methods:{
        changeIsYin(row){
            updateisyin({
                _id:row._id,
                is_yin:row.is_yin
            })
            .then(res=>{

            })
        },
        changeIsHei(row){
            updateishei({
                _id:row._id,
                ishei:row.ishei
            })
            .then(res=>{

            })
        },
        delTiwen(row){
            delOneList({
                _id:row._id
            })
            .then(res=>{
                if(res.type){
                    this.tiwenlist = this.tiwenlist.filter(item=> item._id !== row._id)
                }else{
                    return false
                }
            })
        },
        handleClose(){
            this.dialogVisible = false
        },
        showDialog(){
            this.dialogVisible = true
        },
        updateById(){
            addtiwen({
                tiwen:this.form.tiwen
            })
            .then(res=>{
                if(res.type){
                    this.dialogVisible = false
                     this.getlist()
                }else{
                    return false
                }
            })
        },
        getlist(){
              mytiwenlist({})
        .then(res=>{
            this.tiwenlist = res.result
            console.log(this.tiwenlist)
        })
        },
       
       updata(row){
            this.updataVisible = true
            this.myform = {
                ...row
            }
           
       },
        update(){
            
            this.$refs.myform.validate(valid=>{
                if(valid){
                    updatetiwenone({
                        ...this.myform
                    })
                    .then(res=>{
                        if(res.type){
                            this.updataVisible = false
                            this.tiwenlist.forEach((item,idx)=>{
                                if(item._id == this.myform._id){
                                    Vue.set(this.tiwenlist,idx,this.myform)
                                }
                            })
                        }else{
                            return false
                        }
                    })
                }
            })
            
        },
       updataClose(){
           this.updataVisible = false
       }
    }
}
</script>